<template>
	<div id="app">
		<div class="example">
			<h3>----课程列表----</h3>
			<div class="list-group">
				<a href="#" class="list-group-item" v-for="course in courseList">
					<router-link to="/detail/2">
						<h4 class="list-group-item-heading">
						<img :src="course.src"/><!--动态显示课程图片-->
						</h4>
					</router-link>
						<p class="list-group-item-text text-muted">{{course.description}}</p><!--动态显示课程描述-->
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Index',
		components: {

		},
		data() {
			return {
				courseList: [{
						title: 'Vue课程',
						src: require('../static/img/logos.png'),
						description: '一套构建用户界面的渐进式框架',
					},
					{
						title: 'JavaScript课程',
						src:require('../static/img/js.jpg'),
						description: '是一种直译式脚本语言',

					},
					{
						title: 'HTML课程',
						src: require('../static/img/html.jpg'),
						description: 'HTML5 是最新的 HTML 标准',
					}
				],
			}
		}
	}
</script>
<style scoped>
</style>